<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--标准mui.css-->
		<link rel="stylesheet" href="css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="css/app.css" />
		<style type="text/css">
			html {
				font-size: 16px;
			}

			#app {
				padding-top: 44px;
			}

			.mui-input-group .mui-input-row {
				height: auto;
				padding: 0.5rem 0;
				font-size: 0.9375rem;
			}

			.mui-input-group .mui-input-row input {
				font-size: 0.9375rem;
				color: #333333;
			}

			.mui-input-group .mui-input-row:after {
				right: 15px;
			}

			.mui-input-group:before,
			.mui-input-group::after {
				display: none;
			}

			.mui-input-row label {
				line-height: 18px;
			}

			::-webkit-input-placeholder {
				/* WebKit browsers */
				color: #CCCCCC;
				font-size: 0.9375rem;
			}

			::-moz-placeholder {
				/* Mozilla Firefox 19+ */
				color: #CCCCCC;
				font-size: 0.9375rem;
			}

			:-ms-input-placeholder {
				/* Internet Explorer 10+ */
				color: #CCCCCC;
				font-size: 0.9375rem;
			}

			.uploadImg {
				padding-left: 15px;
				position: relative;
			}

			.uploadImg img {
				width: 7.5rem;
				height: 7.5rem;
				border: 1px dashed #e5e5e5;
			}

			.uploadImg input {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			.submit {
				display: block;
				width: 20.9375rem;
				height: 2.875rem;
				line-height: 2.8125rem;
				text-align: center;
				color: white;
				font-size: 1.125rem;
				background: linear-gradient(180deg, #FF8E3C 0%, #FC6A02 100%);
				opacity: 0.6;
				padding: 0;
				margin: 0 auto;
				margin-top: 1.875rem;
				border: none;
				border-radius: 2px;
			}

			.submit.active {
				opacity: 1;
			}
			.toRegister {
				font-size: 0.875rem;
				text-align: right;
				padding: 0.625rem 1.25rem 0 0;
				color: #999;
				font-family: 'Courier New', Courier, monospace;
			}
			.toRegister a {
				font-weight: bold;
				color: #ff5564;
			}
			.toRegister img {
				width: 31px;
				vertical-align: middle;
				margin-right: -11px;
			}
		</style>
	</head>

	<body style="background-color: #FFFFFF;">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-closeempty mui-pull-left"></a>
			<h1 class="mui-title">登录</h1>
		</header>
		<div id="app">
			<div class="list">
				<form class="mui-input-group">
					<div class="mui-input-row">
						<label>手机号码</label>
						<input type="text" placeholder="请输入手机号" v-model="account">
					</div>
					<div class="mui-input-row">
						<label>密码</label>
						<input type="password" placeholder="请输入密码" v-model="password">
					</div>
					<div class="toRegister">
						<img src="https://wimg.588ku.com/gif620/19/09/25/e923b00b90d415cb57bdfb5640c96712.gif" >
						还没有账号?<a href="register.html">立即注册</a>
					</div>
				</form>
				<button type="button" class="submit" :class="canLogin?'active':''" @click="login">登录</button>
			</div>
			
		</div>

		<script src="js/mui.js"></script>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					account: "",
					password: "",
				},
				methods: {
					login: function() {
						if (!this.canLogin){
							return
						}
						var params = {
							account: this.account,
							password: this.password,
						}
						$post("/api/user/login", params, function(res) {
							localStorage.setItem("userinfo",JSON.stringify(res.userinfo))
							localStorage.setItem("token",res.userinfo.token)
							mui.openWindow("index.html")
						})
					}
				},
				computed: {
					canLogin: function() {
						return this.password && this.account
					}
				},
				created: function() {

				},
				mounted: function() {
					mui.init()
					this.account = getQueryString("phone") || "";
				}
			})
		</script>
	</body>

</html>
